<template>
<div class="bottom">
    <div class="bottombar">
       <!-- 路由出口 -->
        <router-link to="/main">
            <div>
                <van-icon name="wap-home" size=".3rem"/>
                <span>首页</span>
            </div>
        </router-link>
        <router-link to="/class">
            <div>
                <van-icon name="shop-collect" size=".3rem"/>
                <span>烘焙课堂</span>
            </div>
        </router-link>
        <router-link to="/quan">
            <div>
                <van-icon name="umbrella-circle" size=".3rem"/>
                <span>烘焙圈</span>
            </div>
        </router-link>
        <router-link to="/wode">
            <div>
                <van-icon name="manager" size=".3rem"/>
                <span>我的</span>
            </div>
        </router-link>
    </div>
</div>
</template>

<style scoped>
.bottom{width: 100%;height: .8rem;}
 .bottombar{
     background-color: #ffffff;
     width: 100%;height: .8rem;align-items: center;border-top: 1px solid #F2B9C8;
     display: flex;justify-content: space-around;position: fixed;bottom: 0}
.bottombar div{
    height:46px;color: #666;
    display: flex;flex-direction: column;justify-content:space-between;align-items: center}
.router-link-active .van-icon{
    color: #EE87B6;
}
.router-link-active span{
    color: #000
}
</style>